<template>
    <div id='' class='system_set_form'>
        <i-form ref="iForm" :config="config">
            <template #logoDocId="rowData">
                <div v-if="file.length !== 0" class="imgShow">
                    <img :src="showImgPath" alt="" srcset="" style="width:200px;height:200px;">
                    <Icon type="ios-close-circle" class="icon_close" size="24" color="#ff9900" @click="removeImg" />
                </div>
                <Upload v-else :show-upload-list="false" multiple type="drag" action="" :accept="Accept" :format="Format" :before-upload="beforeUpload">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击或拖拽文件上传,文件大小不能超过500KB</p>
                    </div>
                </Upload>
            </template>
        </i-form>
    </div>
</template>
<script>
import { config } from './form_config'
export default {
    name: '',
    props: [''],
    data() {
        this.newConfig = icu.util.deepClone(config)
        return {
            config: this.newConfig,
            formData: {},
            file: [],
            showImgPath: '',
            Accept: ".png,.jpg,.jpeg,",
            Format: ['.png', '.jpg', '.jpeg']
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        this.$fileApi = this.$Api.get(['common:upload'])
    },
    methods: {
        getForm(cb) {
            this.$refs.iForm.submit('systemSetAddOrUpdate', (res) => {
                this.formData = this.returnData(res);
                if (this.formData.telephone) {
                    if (!icu.util.jude(this.formData.telephone, 'phone')) { } else {
                        this.$Message.error('联系电话格式不正确')
                        return
                    }
                }
                this.$http.$post('sysMangerSave', { data: this.formData }).then(res => {
                    if (res.code == 200) {
                        this.$Message.success('保存成功');
                        if (cb) {
                            cb(this.formData)
                        }
                        return
                    }
                    this.$Message.error(res.msg)
                })
            })
        },
        setData(res) {
            this.$http.$get('sysMangerDetail', { params: { id: res.id } }).then(res => {
                if (res.code == 200) {
                    if (res.data.logoDocId) {
                        this.file.push({ id: res.data.logoDocId })
                        this.showImgPath = window.config.fileServer + 'show/' + `${res.data.document.minioPath}`
                    }
                    this.$refs.iForm.setData({
                        ...this.returnData(res.data)
                    })
                    return
                }
                this.$Message.error(res.msg)
            })
        },
        returnData(res) {
            return {
                id: res.id ? res.id : '',
                classify: res.classify ? res.classify : '',
                contactsPerson: res.contactsPerson ? res.contactsPerson : '',
                logoDocId: this.file.length == 0 ? '' : this.file[0].id,
                name: res.name ? res.name : '',
                remarks: res.remarks ? res.remarks : '',
                status: res.status,
                telephone: res.telephone ? res.telephone : '',
                visitAddress: res.visitAddress ? res.visitAddress : '',
            }
        },
        beforeUpload(response) {
            // response.size 单位是 b 字节
            if (response.size > 500 * 1024) {
                this.$Message.warning('文件  ' + response.name + ' 太大，上传文件大小不能超过500kb.');
                return
            }
            this.$fileApi.fileUpload(response, (res) => {
                if (res.code == 200) {
                    this.showImgPath = window.config.fileServer + 'show/' + `${res.data[0].minioPath}`
                    this.file = res.data;
                    return
                }
                this.$Message.error(res.msg)
            })
        },
        removeImg() {
            this.file = []
            this.showImgPath = ''
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.imgShow {
    position: relative;
    width: 200px;
    height: 200px;
}
.imgShow .icon_close {
    position: absolute;
    right: 0px;
    top: 0px;
}
</style>